<template>
  <view class="mxp-sticky" :style="[cusStyle, newStyle]" :class="[cusClass]">
    <slot name="sticky"></slot>
  </view>
  <view>
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
  import type { $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import { type CSSProperties, type PropType, computed } from 'vue';
  defineOptions({
    name: 'mxp-sticky',
  });
  const props = defineProps({
    /** 方向模式 (left,top) */
    model: { type: String as PropType<'left' | 'top'>, default: 'top' },
    /** 偏移 */
    offset: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    /** 层级 */
    zIndex: { type: Number, default: 1 },
    ...publicStyeProps,
  });
  defineSlots<{
    /** 需要固定的内容 */
    sticky: () => void;
    /** 主体内容 */
    default: () => void;
  }>();
  const newStyle = computed<CSSProperties>(() => {
    const style: CSSProperties = { zIndex: props.zIndex };
    if (props.model === 'top') {
      style.top = props.offset;
    } else {
      style.left = props.offset;
    }
    return style;
  });
</script>

<style scoped>
  .mxp-sticky {
    position: sticky;
  }
</style>
